<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top</title>
    <link rel="stylesheet" type="text/css" href="../../css/style.css">
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <style>
        .tools-icon {
            font-size: 24px; /* 调大按钮的字体大小 */
            float: right; /* 将按钮靠右浮动 */
        }
        
    </style>

</head>

<body>
    <div class="header">
        <div class="user-profile">
            <h1 class=" text-primary " style=" right: auto;">同盾募捐平台</h1>
            <img id="avatar" src="#" alt="User Avatar">
            <span>您好，<span id="userName"></span></span>
            <el-button id="ava" class="tools-icon" onclick="">&#9881;</el-button>
            <div class="dropdown-content">
                <a href="../UserFunction/userInfoCenter.html" target="_top">个人中心</a>
                <a href="../user/login.html" target="_top">退出登录</a>
            </div>
        </div>
    </div>

    <script>

        document.addEventListener("DOMContentLoaded", function (event) {
            var userName = localStorage.getItem('userName');
            var userId = localStorage.getItem('userId');
            document.getElementById("userName").textContent = userName;

            // 获取退出按钮元素
            var logoutButton = document.querySelector('.dropdown-content a[href="../user/login.html"]');

            // 监听退出按钮的点击事件
            logoutButton.addEventListener('click', function (event) {
                // 清除localStorage中存储的所有值
                localStorage.clear();
            });

            document.getElementById("ava").addEventListener("click", toggleDropdown);

            function toggleDropdown() {
                var dropdown = document.getElementsByClassName("dropdown-content")[0];
                dropdown.classList.toggle("show");
            }

            document.addEventListener("click", function (event) {
                var dropdown = document.getElementsByClassName("dropdown-content")[0];
                if (!event.target.matches("#ava")) {
                    if (dropdown.classList.contains("show")) {
                        dropdown.classList.remove("show");
                    }
                }
            });

            // 发送获取头像请求
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "http://localhost:8888/api/user/showHead?userId=" + userId, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var imageUrl = JSON.parse(xhr.responseText).data;
                    document.getElementById("avatar").src = imageUrl;
                }
            };
            xhr.send();

        });


        function showTools() {
            alert("This is a tools icon!");
        }



    </script>
</body>

</html>